<template>
  <div>
    <p>我是子组件</p>
    <p>子组件内容：{{ value }}</p>
    <p><button @click="onChange">改变内容</button></p>
    <input
      type="text"
      :value="value"
      @input="$emit('cc', $event.target.value)">
    <input type="text" v-model="del">
    <p>
      <!-- <child1 :one="" :two="child2" @test1="onTest1" @test2="onTest2"/> -->
    </p>
  </div>
</template>

<script>
// import grandSon from './grandSon'
// import Child1 from './Child1.vue'
export default {
  // components: {
  //   child1
  // },
  /*
    vue组件之间的传递分类：
    1、父向子传递：props
    2、子向父传递：emit3、兄弟之间传递：借助中间代理：emit3、兄弟之间传递：借助中间代理：emit3、兄弟之间传递：借助中间代理：emit,$on
    4、祖先传给孙子：这个高级provide,inject
    父子关系：parent =>children
    祖先和孙子关系：parent=>grandSon
  */
  props: {
    // 此处一定要用value
    value: {
      type: String
    }
  },
  model: {
    prop: 'value',
    event: 'cc'
  },
  data () {
    return {
      del: 999
    }
  },
  // 子组件export default中的model:{}里面两个值，prop代表着我要和props的那个变量相对应，event表示着事件，
  // 我触发事件cc的时候会改变父组件v-model的值。
  mounted () {
    // console.log(this.$props)
    // console.log(this.$attrs)
    // console.log(this.$parent)
    // console.log(this.$prop)
    // console.log(this.$listeners)
    // $attrs收集器:收集属性
    // $listeners收集器：收集事件
    // 收集器收集会排除（props,class,style…）
  },
  /*
    $attrs
    包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时，这里会包含所有父作用域
    的绑定 (class 和 style 除外)，并且可以通过 v-bind="$attrs" 传入内部组件——在创建高级别的组件时非常有用。来自官网
    意思就是：$attrs 可以收集父组件中的所有传过来的属性除了那些在组件中没有通过 props 定义的。
  */
  methods: {
    onChange () {
      this.value = '我是由子组件触发改变了内容'
      // this.$emit('cc', '456')
    }
  }
}

</script>
<style scoped>
</style>
